<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Centering Example</title>
<style>
    /* 父元素设置,子元素居中 */
  .container {
    width: 600px;
    height: 300px;
    display: flex;
    /* 子元素在主轴方向居中 (默认水平方向居中) */
    justify-content: center;
    /* 子元素在交叉轴方向居中 */
    align-items: center;
    border:2px solid #ccc;
  }

  .container .centered {
    background-color: #f0f0f0; /* 仅为了可视化 */
    padding: 20px;
    border: 1px solid #ccc;
  }

  /* 自己本身居中 */
  .center-block {
  width: 200px; /* 需要指定宽度 */
/* margin: 0：设置元素的上下外边距为 0。
auto：对于左右外边距，设置为自动。浏览器会自动计算左右外边距的值，使得元素在其父元素中水平居中。 */
  margin: 0 auto;
}


 /* 父元素样式 */
 .parent {
      position: relative;
      /* 设置相对定位，为子元素绝对定位提供参考 */
      width: 300px;
      height: 300px;
      border: 2px solid blue;
    }

    /* 子元素样式 */
   .child {
      position: absolute;
      /* 设置绝对定位 */
      width: 150px;
      height: 100px;
      background-color: lightgreen;
      border: 1px solid green;
      left: 50%;
      /* 将子元素左边沿移动到父元素宽度的一半处 */
      top: 50%;
      /* 将子元素上边沿移动到父元素高度的一半处 */
      transform: translate(-50%, -50%);
      /* 将子元素向左和向上移动自身宽度和高度的一半，实现居中 */
    }

</style>
</head>
<body>

<div class="container">
  <div class="centered">父元素设置。子元素居中。</div>
</div>
<br>
<div class="center-block">自己本身水平居中，这个有两个条件1.块级元素：margin: 0 auto;只对块级元素有效。如果你尝试在一个非块级元素上使用这个属性，它可能不会产生预期的效果。
  2.固定宽度：元素的宽度必须是固定的，或者至少是可计算的。如果元素的宽度是100%或者没有设置宽度，margin: 0 auto;可能不会生效。</div>

<div class="parent">
    <div class="child">使用绝对定位和 transform 居中。</div>
  </div>

</body>
</html>
